<template>
  <div class="goods-model-price-chart">
    <div class="goods-model-price-chart-title">商品规格统计图</div>
    <div class="goods-model-price-chart-div">
      <div ref="chart"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      goodsStat: {
        type: Object,
        required: true
      }
    },

    computed: {
      goodsModelPriceList() {
        return this.goodsStat.goodsModelPriceList;
      }
    },

    data() {
      return {
        chart: null
      };
    },

    mounted() {
      this.setChart();
      this.erd.listenTo(this.$el, this.chartResetSize);
    },

    methods: {
      setChart() {
        let chartDom = this.$refs['chart'];
        const chart = this.echarts.init(chartDom);
        let option = this.getOption();
        chart.setOption(option, true);
        this.chart = chart;
      },

      getOption() {
        let goodsModelPriceList = this.goodsModelPriceList;
        let series = [];
        for (let i = 0; i < goodsModelPriceList.length; i++) {
          let goodsModelPrice = goodsModelPriceList[i];
          series.push({
            type: 'bar',
            name: goodsModelPrice.type,
            data: goodsModelPrice.dataList
          });
        }
        return {
          grid: {
            left: 50,
            top: 30,
            right: 30,
            bottom: 30
          },
          legend: {
            selectedMode: false
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['最小值', '平均值', '最大值']
          },
          yAxis: {},
          series: series
        };
      },

      chartResetSize() {
        let chart = this.chart;
        if (chart !== null) {
          chart.resize();
        }
      }
    }
  };

</script>

<style lang="scss" scoped>
  .goods-model-price-chart {
    width: 100%;
    height: 100%;

    .goods-model-price-chart-title {
      font-size: 20px;
      text-align: center;
    }

    .goods-model-price-chart-div {
      height: calc(100% - 26px);

      >div {
        width: 100%;
        height: 100%;
      }
    }
  }

</style>
